<template>
  <div class="app-container" style="padding-bottom: 0;">
    <el-row>
      <span style="color: #409EFF;">到账</span>
    </el-row>
    <el-row>
      <my-table
        key="1"
        :data="props.projectBillList"
        :col-configs="billColConfigs"
        v-loading="false"
        :page-num="1"
        :page-size="10"
      >
      </my-table>
    </el-row>
    <el-row style="margin-top: 10px">
      <span style="color: #409EFF;">支出</span>
    </el-row>
    <el-row>
      <my-table
        key="2"
        :data="props.costProjectList"
        :col-configs="costColConfigs"
        v-loading="false"
        :page-num="1"
        :page-size="10"
      >
      </my-table>
    </el-row>
    <el-row style="margin-top: 10px">
      <span style="color: #409EFF;">开票</span>
    </el-row>
    <el-row>
      <my-table
        key="3"
        :data="props.projectInvoiceList"
        :col-configs="invoiceColConfigs"
        v-loading="false"
        :page-num="1"
        :page-size="10"
      >
      </my-table>
    </el-row>
    <el-row style="margin-top: 10px">
      <span style="color: #409EFF;">印章使用</span>
    </el-row>
    <el-row>
      <my-table
        key="4"
        :data="props.sealList"
        :col-configs="useColConfigs"
        v-loading="false"
        :page-num="1"
        :page-size="10"
      >
      </my-table>
    </el-row>
  </div>
</template>

<script>
  import myTable from '@/components/myTable/component/tablechild'
  import global from '@/components/global'

  import { AreaSelect } from 'vue-area-linkage'
  import { pca } from 'area-data'
  import { formatDate } from '@/utils/index'

  const time = {
    props: ['colConfig'],
    filters: {
      formatDate(time) {
        var date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd')
      }
    },
    template: `
  <el-table-column :label="colConfig.label" :width="colConfig.width">
      <span slot-scope="scope">
        {{ scope.row[colConfig.prop] | formatDate }}
      </span>
  </el-table-column>
  `
  }

  const formatter = function(row, column) {
    if (row[column.property]) {
      let obj = {}
      obj = global[`${column.property}List`].find((item) => {
        return item.value === row[column.property] // 筛选出匹配数据
      })
      return obj.label
    }
  }

  const billUnit = function(row, column) {
    if (row[column.property]) {
      let obj = {}
      obj = global.billUnitList.find((item) => {
        return item.value === row[column.property] // 筛选出匹配数据
      })
      return obj.label
    }
  }

  const completionAcceptanceReport = {
    props: ['colConfig'],
    template: `
  <el-table-column :label="colConfig.label" :width="colConfig.width">
      <span slot-scope="scope">
        <div :style="{'color':scope.row.completionAcceptanceReport ? '#606266':'red'}">
          {{ scope.row[colConfig.prop] }}
        </div>
      </span>
  </el-table-column>
  `
  }

  export default {
    name: 'projectfinance',
    props: ['props'],
    components: {
      myTable,
      AreaSelect
    },
    data() {
      return {
        billColConfigs: [
          { prop: 'receivingUnit', label: '收款单位', width: '150', formatter: billUnit },
          { prop: 'partyA', label: '业主', width: '150' },
          { prop: 'billAmount', label: '收款金额(万元)', width: '110' },
          { prop: 'billTime', label: '收款时间', width: '100', component: time },
          { prop: 'stage', label: '收款阶段', width: '150', formatter: formatter }
        ],
        costColConfigs: [
          { prop: 'payCompany', label: '支付对象', width: '150' },
          { prop: 'payAmount', label: '支付金额(万元)', width: '110' },
          { prop: 'datePay', label: '支付时间', width: '100', component: time },
          { prop: 'operator', label: '经办人', width: '150' },
          { prop: 'typeName', label: '支出类型', width: '150' }
        ],
        invoiceColConfigs: [
          { prop: 'invoiceNumber', label: '发票号', width: '100' },
          { prop: 'invoiceTitle', label: '发票抬头', width: '250' },
          { prop: 'amount', label: '开票金额(万元)', width: '110' },
          { prop: 'taxes', label: '开票税费(万元)', width: '110' },
          { prop: 'invoiceTime', label: '开票时间', width: '100', component: time },
          { prop: 'invoiceType', label: '开票类型', width: '80', formatter: formatter },
          { prop: 'billUnit', label: '开票单位', width: '100', formatter: formatter }
        ],
        useColConfigs: [
          { prop: 'startTime', label: '申请日期', width: '100', component: time, fixed: true },
          { prop: 'teamName', label: '申请部门', width: '150' },
          { prop: 'sealPerson', label: '申请人', width: '100' },
          { prop: 'contractCode', label: '合同编号', width: '150' },
          { prop: 'projectName', label: '合同项目', width: '250', component: completionAcceptanceReport },
          { prop: 'sealFile', label: '用印文件名称', width: '150', component: completionAcceptanceReport },
          { prop: 'sealReason', label: '用印理由', width: '100' },
          { prop: 'commonSeal', label: '公章/数量', width: '100' },
          { prop: 'corporateSeal', label: '法人章/数量', width: '100' },
          { prop: 'contractSeal', label: '合同章/数量', width: '100' },
          { prop: 'plotSeal', label: '出图章/数量', width: '100' },
          { prop: 'registerSeal', label: '注册章/数量', width: '100' },
          { prop: 'technologySeal', label: '技术章/数量', width: '100' },
          { prop: 'authenticateSeal', label: '鉴定章/数量', width: '100' }
        ],
        listLoading: true,
        teamRow: {},
        tableData: [],
        pageNum: 1,
        pageSize: 10,
        total: 1,
        outerVisible: false,
        innerVisible: false,
        pca: pca,
        projectBillList: [],
        costProjectList: []
      }
    },
    created() {
      // this.quchong()
    },
    methods: {
      getRowKeys(row) {
        return row.id
      },
      quchong() {
        this.projectBillList = this.props.projectBillList
        var unique = {}
        this.projectBillList.forEach(function(a) {
          unique[JSON.stringify(a)] = 1
        })
        this.projectBillList = Object.keys(unique).map(function(u) {
          return JSON.parse(u)
        })
        this.costProjectList = this.props.projectBillList
        var uniqueCostProject = {}
        this.projectBillList.forEach(function(a) {
          uniqueCostProject[JSON.stringify(a)] = 1
        })
        this.projectBillList = Object.keys(uniqueCostProject).map(function(u) {
          return JSON.parse(u)
        })
      }
    },
    mounted() {
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container {
    margin-left: 40px;
    .el-paination {
      margin-top: 20px;
    }
    .table-btn {
      margin-bottom: 10px;
      & > button {
        margin: 0 20px;
      }
      .el-dialog {
        textarea {
          margin-top: 10px;
        }
        .el-checkbox {
          margin-right: 20px;
        }
        .el-checkbox + .el-checkbox {
          margin-left: 0;
        }
      }
    }
    .img-dialog {
      max-width: 440px;
    }
  }

</style>


<style rel="stylesheet/scss" lang="scss">
  .black {
    color: #000;
  }

  .el-input__icon {
    line-height: 100%;
  }

  .el-form-item__content {
    line-height: 33px;
  }

  .area-select .area-selected-trigger {
    padding: 0 10px;
  }

  a, a:focus, a:hover {
    color: #409EFF;
  }

  /*.el-table__body tr.hover-row>td {
    background-color: #0000ff !important;
  }

  .el-table__body tr.current-row>td {
    background-color: #0000ff !important;
  }*/
</style>
